import { View, Image, Text } from '@tarojs/components';
import { AtInputNumber } from 'taro-ui';
import Checkbox from '@/components/Checkbox';
import './index.scss';

interface IProps {
  cart: any;
  onSelectChange?: (e: boolean) => void;
  onCountChange?: (e: number) => void;
}

export default function ({ cart, onSelectChange, onCountChange }: IProps) {
  const _onSelectChange = (value: boolean) => {
    onSelectChange?.(value);
  };

  const _onCountChange = (value: number) => {
    onCountChange?.(value);
  };

  return (
    <View className="cart-item">
      <View className="select-btn">
        <Checkbox checked={cart.isSelected} onChange={_onSelectChange} />
      </View>
      <View className="goods-info">
        <View className="goods-image">
          <Image src={cart.imageUrl} />
        </View>
        <View className="goods-right">
          <View className="goods-name">{cart.goodsName}</View>
          <View className="goods-sku">{cart.goodsSku}</View>
          <View className="goods-bottom">
            <View className="goods-price">
              <Text>￥</Text>
              {(cart.goodsPrice / 100).toFixed(2)}
            </View>
            <View className="goods-count">
              <AtInputNumber
                type="digit"
                min={1}
                width={40}
                step={1}
                value={cart.count}
                onChange={_onCountChange}
              />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
